<script setup>
import { ref } from 'vue'
import { Delete, Search } from '@element-plus/icons-vue'
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
// 搜索框
import { useSearchHistoryStore, useUserStore } from '@/stores/index.js'
import router from '@/router/index.js'
import { ElMessageBox } from 'element-plus'
const search = ref('')
const searchHistoryStore = useSearchHistoryStore()
const { searchHistory, addSearch, removeSearch, clearSearchHistory } =
  searchHistoryStore

const searchHandler = () => {
  if (search.value) {
    addSearch(search.value)
  }
  // 执行搜索逻辑
  router.push({
    path: '/search',
    query: {
      search: search.value
    }
  })
  search.value = ''
}

const handleTagClick = (item) => {
  search.value = item
  searchHandler()
}

const removeTag = (index) => {
  removeSearch(index)
}

const clearHistory = () => {
  location.reload()
  clearSearchHistory()
}
const userStore = useUserStore()
const handelLogout = async () => {
  //退出操作
  await ElMessageBox.confirm('确认退出吗?', '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
  userStore.setToken('')
  userStore.setUser({})
  await router.push('/login')
}
</script>

<template>
  <div class="background">
    <div style="width: 100rem"></div>
  </div>
  <div class="top">
    <el-affix :offset="0">
      <el-menu
        :default-active="$route.path"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
        router
      >
        <el-menu-item index="/home/main"> Online Music </el-menu-item>
        <el-card
          class="search_card"
          v-show="search !== '' && search !== null"
          shadow="always"
        >
          <div v-if="searchHistory.length === 0">
            <p>没有历史记录</p>
          </div>
          <div v-else>
            <div>
              <div class="history_top">
                <span>历史记录</span>
                <el-button size="small" type="danger" @click="clearHistory">
                  <el-icon><Delete /></el-icon>
                  清空历史
                </el-button>
              </div>
              <el-tag
                size="large"
                style="margin: 0.5rem; cursor: pointer"
                v-for="(item, index) in searchHistory"
                :key="index"
                @click="handleTagClick(item)"
                closable
                @close="removeTag(index)"
              >
                {{ item }}
              </el-tag>
            </div>
          </div>
        </el-card>
        <div class="flex-grow" />
        <el-sub-menu index="2">
          <template #title>{{ userStore.user.username }}</template>
          <el-menu-item index="/song/manage">资源管理</el-menu-item>
          <el-menu-item index="/user/info">个人资料</el-menu-item>
          <el-menu-item @click="handelLogout">退出登录</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-affix>
  </div>
  <div class="view">
    <router-view />
  </div>
  <el-backtop :right="100" :bottom="100" />
  <Footer />
</template>

<style scoped lang="scss">
:deep .el-affix {
  background-color: rgba(255, 255, 255, 0);
}
.flex-grow {
  flex-grow: 1;
}
#app > ul > li:nth-child(1) {
  font-size: 18px;
  font-weight: 700;
}
.view {
  padding: 20px 150px;
}
.background {
  background-image: url('@/assets/indexbackgoound.png'); /* 替换为你的背景图片路径 */
  position: fixed;
  z-index: -1;
  min-height: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/*搜索*/
.search {
  z-index: 1;
}
.search_card {
  z-index: 1;
  position: relative;
  top: 3.1rem;
  left: 50%;
  width: 33.2rem;
}
.search_card {
  /*margin-top: 0.5rem;*/
  height: 10rem;
  max-height: 20rem;
  overflow-y: auto;
}

.search_card p {
  text-align: center;
  color: #888;
}
.history_top {
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
}
</style>
